var phoneNumber = "";
var phoneNumberField = {
	id: 'content',
	xtype: 'toolbar',
	labelAlign: 'center',
	ui: 'light',
	width: '35%',
 	html: phoneNumber
};
var dockedItems = {
	xtype: 'fieldset',
	//title: '',
	//width:'80%',
	align: 'center',
	layout: {
			align: 'center',
			type: 'hbox',
			pack: 'center'
	},
	defaults: {
		required: true,
		labelAlign: 'center',
		//labelWidth: '80%' 
	},
	flex: 0, style: 'margin: .5em;',
    items: [{
    	xtype: 'toolbar',
		width: '15%',
		ui: 'dark',
    	title:"Phone Number : "
    }, phoneNumberField, 
    {
    	xtype:'button',
		width: '5%',
		iconMask: true,
		iconAlign: 'top', 
    	iconCls: 'reply',
    	handler:function(){
    		phoneNumber = phoneNumber.substring(0, phoneNumber.length - 1);
    		Ext.getCmp('content').update(phoneNumber);
    	}
    }]
};

var phone_numberField = {
		xtype : 'textfield',
		name : 'Phone Number',
		label : 'phone Number',
		labelWidth : '15%',
		placeHolder : '000 - 0000 - 0000',
		autoCapitalize : false,
		required : false,
		useClearIcon : true
};
var tele_phone = new Ext.form.FormPanel({
	useCurrentLocation: true,
	//scroll:'vertical',
	cardSwitchAnimation: "slide",
	layout: {
		type: 'vbox',
		pack: 'center',
		align: 'stretch'
	},
	defaults : {
		layout : {
			type : 'hbox'
		},
		flex : 1,
		defaults : {
			xtype : 'button',
			cls : 'demobtn',
			flex : 1
		}
	},
	items:[{
		xtype: 'fieldset',
		title: ' ',
		width:'80%',
		instructions: 'FormPanel',
		align: 'center',
		layout: {
				align: 'center'
		},
		defaults: {
			required: true,
			labelAlign: 'center',
			labelWidth: '80%' 
		},
		items:[ dockedItems,
		{
			// scroll: 'horisontal',
			align:'center',
			width: '100%',
			layout: {
				align: 'center',
				type: 'hbox',
				pack: 'center'},  
			flex: 0, style: 'margin: .5em;',
			items:[{
				xtype:'button',
				width: '15%',
				text: '1',
				iconCls:'round',
				// font-size:'80%',
				iconAlign: 'top',
				handler:function(){
					phoneNumber += "1";
					Ext.getCmp('content').update(phoneNumber);
				}
			},{ 
				xtype:'spacer',
				width:'5%',
			},{
				xtype:'button',
				width: '15%',
				text: '2',
				iconCls:'round',
				iconAlign: 'top', 	
				handler:function(){
					phoneNumber += "2";
					Ext.getCmp('content').update(phoneNumber);
				},
			},{ 
				xtype:'spacer',
				width:'5%',
			},{

				xtype:'button',
				text: '3',
				width: '15%',
				iconCls:'round',
				iconAlign: 'top', 	
				handler:function(){
					phoneNumber += "3";
					Ext.getCmp('content').update(phoneNumber);
				},
			}]
		}, {
			//scroll: 'horisontal',
			align: 'center',
			width: '100%',
			layout: {
				type: 'hbox',
				pack: 'center'},  
			flex: 2, style: 'margin: .5em;',
			items:[{
				xtype:'button',
				text: '4',
				width: '15%',
				iconCls:'round',
				iconAlign: 'top',
				handler:function(){
					alert(this.getText());
					phoneNumber += "4";
					Ext.getCmp('content').update(phoneNumber);
				}
			},{ 
				xtype:'spacer',
				width:'5%',
			},{
				xtype:'button',
				width: '15%',
				text: '5',
				iconCls:'round',
				iconAlign: 'top', 	
				handler:function(){
					phoneNumber += "5";
					Ext.getCmp('content').update(phoneNumber);
				},
			},{ 
				xtype:'spacer',
				width:'5%',
			},{
				xtype:'button',
				width: '15%',
				text: '6',
				iconCls:'round',
				iconAlign: 'top', 	
				handler:function(){
					phoneNumber += "6";
					Ext.getCmp('content').update(phoneNumber);
				},
			}]
		}, {
			//scroll: 'horisontal',
			align:'center',
			width: '100%',
			layout: {
				type: 'hbox',
				pack: 'center'},  
			flex: 2, style: 'margin: .5em;',
			items:[{
				xtype:'button',
				width: '15%',
				text: '7',
				iconCls:'round',
				iconAlign: 'top',
				handler:function(){
					phoneNumber += "7";
					Ext.getCmp('content').update(phoneNumber);
				}
			},{ 
				xtype:'spacer',
				width:'5%',
			},{

				xtype:'button',
				width: '15%',
				text: '8',
				iconCls:'round',
				iconAlign: 'top', 	
				handler:function(){
					phoneNumber += "8";
					Ext.getCmp('content').update(phoneNumber);
				},
			},{ 
				xtype:'spacer',
				width:'5%',
			},{
				xtype:'button',
				width: '15%',
				text: '9',
				iconCls:'round',
				iconAlign: 'top', 	
				handler:function(){
					phoneNumber += "9";
					Ext.getCmp('content').update(phoneNumber);
				},
			}]
		}, {
			//scroll: 'horisontal',
			align:'center',
			width: '100%',
			layout: {
				type: 'hbox',
				pack: 'center'},  
			flex: 2, style: 'margin: .5em;',
			items:[{
				xtype:'button',
				width: '15%',
				text: '*',
				iconCls:'round',
				iconAlign: 'top',
				handler:function(){
					phoneNumber += "*";
					Ext.getCmp('content').update(phoneNumber);
				}
			},{ 
				xtype:'spacer',
				width:'5%',
			},{
				xtype:'button',
				width: '15%',
				text: '0',
				iconCls:'round',
				iconAlign: 'top', 	
				handler:function(){
					phoneNumber += "0";
					Ext.getCmp('content').update(phoneNumber);
				},
			},{ 
				xtype:'spacer',
				width:'5%',
			},{
				xtype:'button',
				width: '15%',
				text: '#',
				iconCls:'round',
				iconAlign: 'top', 	
				handler:function(){
					phoneNumber += "#";
					Ext.getCmp('content').update(phoneNumber);
				},
			}]
		}, {
			//scroll: 'horisontal',
			align:'center',
			width: '100%',
			layout: {
				type: 'hbox',
				pack: 'center'},  
			flex: 2, 
			style: 'margin: .5em;',
			items:[{
				xtype:'button',
				width: '15%',
				text: '전화걸기',
				ui: 'decline-round',
				iconCls:'round',
				iconAlign: 'top',
				handler:function(){
					//phoneNumber += "*";
					//Ext.getCmp('content').update(phoneNumber);
				}
			},{ 
				xtype:'spacer',
				width:'10%',
			},{
				xtype:'button',
				width: '15%',
				text: '친구등록',
				ui: 'decline-round',
				iconCls:'round',
				iconAlign: 'top', 	
				handler:function(){
					//phoneNumber += "0";
					//Ext.getCmp('content').update(phoneNumber);
				}
			} ]
		}
		]
	}],
});   